<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Run Python in Browser</title>
<!-- 导入 Skulpt -->
<script src="./class/skulpt.min.js"></script>
<!-- 导入 Skulpt-Stdlib -->
<script src="./class/skulpt-stdlib.js"></script>
</head>
<body>

<h1>Python in Browser</h1>

<!-- 创建一个 textarea 用于输入 Python 代码 -->
<textarea id="python-code" rows="10" cols="50">print("Hello, world!")</textarea>

<!-- 创建一个按钮，点击后执行 Python 代码 -->
<button onclick="runPython()">Run Python</button>

<!-- 显示 Python 代码执行结果 -->
<div id="output"></div>

<script>
function runPython() {
  // 获取文本框中的 Python 代码
  var code = document.getElementById("python-code").value;
  
  // 使用 Skulpt 运行 Python 代码
  Sk.configure({
    output: function(text) {
      // 将输出追加到页面上
      document.getElementById("output").textContent += text;
    },
    read: function(filename) {
      if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][filename] === undefined)
          throw "File not found: '" + filename + "'";
      return Sk.builtinFiles["files"][filename];
    }
  });
  
  Sk.misceval.asyncToPromise(function() {
    // 使用 Skulpt 执行 Python 代码
    return Sk.importMainWithBody("<stdin>", false, code, true);
  }).then(function(mod) {
    // 执行成功
    console.log("Python code executed successfully!");
  }, function(err) {
    // 执行失败
    console.error("Error executing Python code:", err.toString());
    document.getElementById("output").textContent = err.toString();
  });
}
</script>

</body>
</html>
